<template>
    <div class="visitConfirm">
        <!--搜索框-->
        <div class="interview-header">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input v-model="searchItem.phone" placeholder="用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.jie" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item label="家访状态" prop="visitStatus">
                    <el-select  v-model.number="searchItem.visitStatus" placeholder="家访状态">
                        <el-option label="未家访" :value=0></el-option>
                        <el-option label="未通过" :value=1></el-option>
                        <el-option label="通过" :value=2></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <el-table border :data="tableData" :fit="true">
                <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
                <el-table-column prop="visitStatus" align="center" label="状态"></el-table-column>
                <el-table-column prop="createTime" align="center" label="申请时间" width="170"></el-table-column>
                <el-table-column prop="loanNo" align="center" label="订单编号" width="200"></el-table-column>
                <el-table-column prop="realName" align="center" label="借款人"></el-table-column>
                <el-table-column prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column prop="carType" align="center" label="车型"></el-table-column>
                <el-table-column prop="carRemark" align="center" label="说明"></el-table-column>
                <el-table-column prop="loanAmount" align="center" label="申请额度" width="100"></el-table-column>
                <el-table-column prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column prop="" align="center" label="资料">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: {loanNo: scope.row.loanNo, userNo: scope.row.userNo}}" style="color: #20a0ff">完整</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="salesman" align="center" label="业务员"></el-table-column>
                <el-table-column prop="signTime" align="center" label="面签时间" width="170"></el-table-column>
                <el-table-column prop="signUser" align="center" label="面签人"></el-table-column>
                <el-table-column prop="signAmount" align="center" label="面签额度" width="100"></el-table-column>
                <el-table-column prop="signLoanTime" align="center" label="借款期限" width="100"></el-table-column>
                <el-table-column prop="interestRate" align="center" label="利率"></el-table-column>
                <el-table-column prop="signFee" align="center" label="综合服务费" width="120"></el-table-column>
                <el-table-column prop="signRepayType" align="center" label="还款方式" width="100"></el-table-column>
                <el-table-column prop="signRemark" align="center" label="面签说明" width="100"></el-table-column>
                <el-table-column align="center" label="风控时间" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="风控人员" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="确定额度" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="借款期限" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="利率" prop=""></el-table-column>
                <el-table-column align="center" label="综合服务费" prop="" width="120"></el-table-column>
                <el-table-column align="center" label="还款方式" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="风控说明" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="家访资料">
                    <template scope="scope">
                        <span @click="openVisitPhoto(scope.row)" style="color: #20a0ff;text-decoration: underline;cursor: pointer;">查看</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="visitRemark" align="center" label="家访说明" width="100"></el-table-column>
                <el-table-column  prop="visitUser" align="center" label="家访人员" width="100"></el-table-column>
                <el-table-column  prop="visitUser" align="center" label="家访确认" width="100"></el-table-column>
                <el-table-column  prop="visitUser" align="center" label="确认人员" width="100"></el-table-column>
                <el-table-column align="center" label="签署人员" prop="" width="100"></el-table-column>
                <el-table-column align="center" label="协议签署" prop="state" width="100" fixed="right">
                    <template scope="scope">
                        <el-button size="small" type="primary">查看协议</el-button>
                    </template>
                </el-table-column>
                <el-table-column  prop="" align="center" label="操作" fixed="right">
                    <template scope="scope">
                        <el-button size="small" type="primary" v-if="scope.row.visitStatus === '待确认'" @click="sureVisit(scope.row)">查看</el-button>
                        <el-button size="small" type="primary" v-else-if="scope.row.visitStatus === '待确认'" @click="openVisitPhoto(scope.row)">家访确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { listLoanVisit } from "@/api/api";
    export default {
        name: "visitConfirm",
        data () {
            return {
                total: 0,
                pagesize: ["10","30","50"],
                // 查询；
                searchItem: {
                    loanNo: "",
                    phone: "",
                    realName: "",
                    visitStatus: "",
                    pageNum: 1,
                    pageSize: 10
                },
                // 家访列表；
                tableData: []
            };
        },
        watch: {
            $route (to) {
                if(to.name === "visitConfirm"){
                    this.loadData();
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
            });
        },
        methods: {
            // 重置；
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.loadData();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.loadData();
            },
            // 家访列表、查询
            async loadData () {
                let _this = this;
                await listLoanVisit(this.searchItem).then(function(res) {
                    let Data = JSON.parse(res.data.ciphertext);
                    if (Data) {
                        _this.tableData = Data.list;
                        _this.total = Data.total;
                        let arr = _this.tableData;
                        for (let i=0; i<arr.length; i++) {
                            let signStatusArr = ["未家访", "未通过", "通过"];
                            let DateUnit = ["年", "月", "日"];
                            let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                            // 状态
                            arr[i].visitStatus = signStatusArr[arr[i].visitStatus];

                            // 申请时间
                            if (arr[i].createTime) {
                                arr[i].createTime = _this.formatTime(arr[i].createTime);
                            };

                            // 面签时间
                            if (arr[i].signTime) {
                                arr[i].signTime = _this.formatTime(arr[i].signTime);
                            };

                            // 申请期限
                            if (arr[i].loanTime) {
                                if(arr[i].loanUnit === "0" || arr[i].loanUnit === "1" || arr[i].loanUnit === "2"){
                                    arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                                } else {
                                    arr[i].loanTime = arr[i].loanTime + arr[i].loanUnit;
                                }
                            };

                            // 借款期限
                            if (arr[i].signLoanTime) {
                                if (DateUnit[arr[i].signLoanUnit]) {
                                    arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];
                                }
                            };

                            // 还款方式
                            arr[i].signRepayType = signRepayType[arr[i].signRepayType];
                        };
                    }
                });
            }
        }
    };
</script>

<style scope lang="scss">
    .visitConfirm{
        /*搜索框*/
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        /*列表*/
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
        }
        .el-table .cell, .el-table th>div{
            padding:5px;
        }
        /*分页*/
        .pageNum{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding: 0;
            }
        }
    }
</style>
